<template>
  <UModal v-model="isOpen" :ui="{ width: 'sm:max-w-lg' }" class="responsive-modal">
    <div class="p-6">
      <h2 class="text-xl font-bold text-gray-900 mb-4">新建画板</h2>
      
      <form @submit.prevent="submitForm">
        <!-- 标题 -->
        <div class="mb-4">
          <UFormGroup label="画板标题" required>
            <UInput 
              v-model="form.title" 
              placeholder="请输入画板标题" 
              :ui="{ base: 'w-full' }"
              required
            />
          </UFormGroup>
        </div>
        
        <!-- 分类 -->
        <div class="mb-4">
          <UFormGroup label="分类">
            <USelect
              v-model="form.category_id"
              :options="categoryOptions"
              placeholder="请选择分类"
              :ui="{ base: 'w-full' }"
            />
          </UFormGroup>
        </div>
        
        <!-- 描述 -->
        <div class="mb-4">
          <UFormGroup label="画板描述">
            <UTextarea 
              v-model="form.description" 
              placeholder="请输入画板描述" 
              :ui="{ base: 'w-full' }"
              rows="3"
            />
          </UFormGroup>
        </div>
        
        <!-- 标签 -->
        <div class="mb-4">
          <UFormGroup label="标签" help="多个标签请用逗号分隔">
            <UInput 
              v-model="form.tags" 
              placeholder="例如：风景,人物,建筑" 
              :ui="{ base: 'w-full' }"
            />
          </UFormGroup>
        </div>
        
        <!-- 按钮 -->
        <div class="flex justify-end space-x-3 mt-6">
          <UButton type="button" color="gray" variant="soft" @click="isOpen = false">
            取消
          </UButton>
          <UButton type="submit" color="primary" :loading="loading">
            创建
          </UButton>
        </div>
      </form>
    </div>
  </UModal>
</template>

<script setup lang="ts">
import { ref, defineEmits } from 'vue'
import { api } from '~/utils/api'

const emit = defineEmits(['created'])

const isOpen = defineModel<boolean>('modelValue', { required: true })

const form = ref({
  title: '',
  category_id: 1, // 默认分类ID
  description: '',
  tags: ''
})

// 分类选项
const categoryOptions = [
  { label: '风景', value: 1 },
  { label: '人物', value: 2 },
  { label: '建筑', value: 3 },
  { label: '动物', value: 4 },
  { label: '美食', value: 5 },
  { label: '其他', value: 6 }
] as const // 确保值为数字类型

const loading = ref(false)

// 提交表单
const submitForm = async () => {
  if (!form.value.title) {
    return
  }
  
  try {
    loading.value = true
    
    const response = await api.post('/api/v1/boards', {
      title: form.value.title,
      category_id: Number(form.value.category_id), // 确保category_id为整数类型
      description: form.value.description,
      tags: form.value.tags
    })
    
    if (response.code === 0) {
      // 重置表单
      form.value = {
        title: '',
        category_id: 1,
        description: '',
        tags: ''
      }
      
      // 关闭模态框
      isOpen.value = false
      
      // 通知父组件创建成功
      emit('created')
    } else {
      // 显示错误信息
      console.error('创建画板失败:', response.msg)
    }
  } catch (error) {
    console.error('创建画板失败:', error)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
/* 移动端响应式样式 */
@media only screen and (max-width: 600px) {
  .responsive-modal {
    width: 95% !important;
    margin: 0 auto;
  }
  
  .p-6 {
    padding: 1rem !important;
  }
  
  .text-xl {
    font-size: 1.1rem !important;
  }
  
  .space-x-3 {
    gap: 0.5rem !important;
  }
  
  .UButton {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
  }
}
</style>